<template>
    <<#if genPageFormOpen == '1'>el-dialog<#else>el-drawer</#if> :title="titleMap[mode]" v-model="visible" :<#if genPageFormOpen == '1'>width<#else>size</#if>="<#if genPageFormType == '1'>500<#else>800</#if>" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="dialogForm" label-width="100px" label-position="right">
            <#if genPageFormOpen == '1'>
            <el-container v-loading="loading">
            <el-main>
            </#if>
<#if genPageFormType == '1'>
    <#list fieldList as field>
        <#if field.pageForm>
            <el-form-item label="${field.javaFieldComment}" prop="${field.javaField}">
            <#if field.pageHtmlType == 'input-number'>
                <el-input-number v-model="form.${field.javaField}" clearable></el-input-number>
            <#elseif field.pageHtmlType == 'text-area'>
                <el-input v-model="form.${field.javaField}" type="textarea" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
            <#elseif field.pageHtmlType == 'switch'>
                <el-switch v-model="form.${field.javaField}" :active-value="true" :inactive-value="false"></el-switch>
            <#elseif field.pageHtmlType == 'date'>
                <el-date-picker v-model="form.${field.javaField}" type="date" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
            <#elseif field.pageHtmlType == 'datetime'>
                <el-date-picker v-model="form.${field.javaField}" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
            <#elseif field.pageHtmlType == 'time'>
                <el-time-picker v-model="form.${field.javaField}" placeholder="请选择${field.javaFieldComment}" clearable></el-time-picker>
            <#elseif field.pageHtmlType == 'year'>
                <el-date-picker v-model="form.${field.javaField}" type="year" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
            <#elseif field.pageHtmlType == 'select'>
                <<#if field.pageDictType??>sc-select<#else>el-select</#if> v-model="form.${field.javaField}" <#if field.pageDictType??>dict="${field.pageDictType!}"</#if> placeholder="请选择${field.javaFieldComment}" style="width: 100%;" clearable></<#if field.pageDictType??>sc-select<#else>el-select</#if>>
            <#else>
                <el-input v-model="form.${field.javaField}" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
            </#if>
            </el-form-item>
        </#if>
    </#list>
<#else>
            <el-row>
                <el-col :span="12">
            <#list fieldList as field>
                <#if (field_index % 2) == 0>
                    <el-form-item label="${field.javaFieldComment}" prop="${field.javaField}">
                    <#if field.pageHtmlType == 'input-number'>
                        <el-input-number v-model="form.${field.javaField}" clearable></el-input-number>
                    <#elseif field.pageHtmlType == 'text-area'>
                        <el-input v-model="form.${field.javaField}" type="textarea" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
                    <#elseif field.pageHtmlType == 'switch'>
                        <el-switch v-model="form.${field.javaField}" :active-value="true" :inactive-value="false"></el-switch>
                    <#elseif field.pageHtmlType == 'date'>
                        <el-date-picker v-model="form.${field.javaField}" type="date" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
                    <#elseif field.pageHtmlType == 'datetime'>
                        <el-date-picker v-model="form.${field.javaField}" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
                    <#elseif field.pageHtmlType == 'time'>
                        <el-time-picker v-model="form.${field.javaField}" placeholder="请选择${field.javaFieldComment}" clearable></el-time-picker>
                    <#elseif field.pageHtmlType == 'year'>
                        <el-date-picker v-model="form.${field.javaField}" type="year" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
                    <#elseif field.pageHtmlType == 'select'>
                        <<#if field.pageDictType??>sc-select<#else>el-select</#if> v-model="form.${field.javaField}" <#if field.pageDictType??>dict="${field.pageDictType!}"</#if> placeholder="请选择${field.javaFieldComment}" style="width: 100%;" clearable></<#if field.pageDictType??>sc-select<#else>el-select</#if>>
                    <#else>
                        <el-input v-model="form.${field.javaField}" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
                    </#if>
                    </el-form-item>
                </#if>
            </#list>
                </el-col>
                <el-col :span="12">
            <#list fieldList as field>
                <#if (field_index % 2) == 1>
                    <el-form-item label="${field.javaFieldComment}" prop="${field.javaField}">
                    <#if field.pageHtmlType == 'input-number'>
                        <el-input-number v-model="form.${field.javaField}" clearable></el-input-number>
                    <#elseif field.pageHtmlType == 'text-area'>
                        <el-input v-model="form.${field.javaField}" type="textarea" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
                    <#elseif field.pageHtmlType == 'switch'>
                        <el-switch v-model="form.${field.javaField}" :active-value="true" :inactive-value="false"></el-switch>
                    <#elseif field.pageHtmlType == 'date'>
                        <el-date-picker v-model="form.${field.javaField}" type="date" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
                    <#elseif field.pageHtmlType == 'datetime'>
                        <el-date-picker v-model="form.${field.javaField}" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
                    <#elseif field.pageHtmlType == 'time'>
                        <el-time-picker v-model="form.${field.javaField}" placeholder="请选择${field.javaFieldComment}" clearable></el-time-picker>
                    <#elseif field.pageHtmlType == 'year'>
                        <el-date-picker v-model="form.${field.javaField}" type="year" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
                    <#elseif field.pageHtmlType == 'select'>
                        <<#if field.pageDictType??>sc-select<#else>el-select</#if> v-model="form.${field.javaField}" <#if field.pageDictType??>dict="${field.pageDictType!}"</#if> placeholder="请选择${field.javaFieldComment}" style="width: 100%;" clearable></<#if field.pageDictType??>sc-select<#else>el-select</#if>>
                    <#else>
                        <el-input v-model="form.${field.javaField}" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
                    </#if>
                    </el-form-item>
                </#if>
            </#list>
                </el-col>
            </el-row>
</#if>
        </el-form>
        <#if genPageFormOpen == '1'>
        </el-main>
        </el-container>
        </#if>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!=='show'" type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
        </template>
    </<#if genPageFormOpen == '1'>el-dialog<#else>el-drawer</#if>>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                // 表单元素控制
                mode: "show",
                titleMap: {
                    <#if genAdd>
                    add: '新增',
                    </#if>
                    <#if genEdit>
                    edit: '编辑',
                    </#if>
                    show: '查看'
                },
                visible: false,
                <#if genAdd || genEdit>
                isSaving: false,
                </#if>
                // 表单数据
                form: {
                    <#list fieldList as field>
                    <#if field.columnPk>
                    ${field.javaField}: null,
                    </#if>
                    </#list>
                    <#list fieldList as field>
                    <#if field.pageForm && !field.columnPk>
                    ${field.javaField}: null,
                    </#if>
                    </#list>
                },
                // 表单验证规则
                rules: {
                    <#list fieldList as field>
                    <#if field.pageForm && field.pageFormRequired>
                    ${field.javaField}: [
                      {required: true, message: '请输入${field.javaFieldComment}', trigger: 'blur'}
                    ],
                    </#if>
                    </#list>
                }
            }
        },
        mounted() {
        },
        methods: {
            // 显示
            open(mode = 'show') {
                this.mode = mode;
                this.visible = true;
                return this;
            },
            // 表单注入数据
            setData(data) {
                <#list fieldList as field>
                <#if field.columnPk>
                this.form.${field.javaField} = data.${field.javaField};
                </#if>
                </#list>
                <#list fieldList as field>
                <#if field.pageTable && !field.columnPk>
                this.form.${field.javaField} = data.${field.javaField};
                </#if>
                </#list>
            },
            <#if genAdd || genEdit>
            // 表单提交
            submit() {
                this.$refs.dialogForm.validate((valid) => {
                    if (valid) {
                        this.isSaving = true;
                        if (<#list fieldList as field><#if field.columnPk>this.form.${field.javaField}</#if></#list>) {
                            this.$API.${module}.${business}.edit.put(this.form).then(() => {
                                this.$emit('success');
                                this.visible = false;
                                this.$message.success("保存成功");
                            }).catch(() => {
                                this.isSaving = false;
                            });
                        } else {
                            this.$API.${module}.${business}.add.post(this.form).then(() => {
                                this.$emit('success');
                                this.visible = false;
                                this.$message.success("保存成功");
                            }).catch(() => {
                                this.isSaving = false;
                            });
                        }
                    }
                })
            }
            </#if>
        }
    }
</script>

<style>
</style>
